<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@page isELIgnored="false"%>
<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2018/7/4
  Time: 16:06
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>项目表头</title>
</head>
<style type="text/css">
    *{
        margin: 0;
        padding: 0;
    }
    h3,p,div,dl,ul,dd,dt,li,body{
        margin: 0;
        padding: 0;
    }
    a{
        color: black;
        text-decoration: none;
    }
    a:hover{
        color: blue;
    }
    .fl{
        float: left;
    }
    /*头部区域*/
    #box{
        width: 380px;
        height:30px;
        margin: 25px auto;
        font-family: '楷体';
        font-size: 20px;
    }
    #mainKey{
        width: 260px;
        border: 1px solid #EE7942;
        height: 33px;
        float: left;
        font-size: 16px;
        padding:0 0 0 5px;
    }
    #search{
        width: 78px;
        height: 30px;
        float: left;
        background:	#EE7942;
        color: white;
        text-align: center;
        line-height: 32px;
        cursor: pointer;
    }
    .wrapperb{
        width:1200px;
        height:80px;
        margin-left: 20%;
    }
    /*header区域*/
    .wrappera{
        width: 100%;
        height: 40px;
        background: #43CD80;
    }

    .wrappera ul{
        float: left;
    }
    .top-nav{
        width: 43%;
        margin-left: 25%;
    }
    .top-nav>li{
        font-size:25px;
        float: left;
        list-style: none;
        width: 160px;
        height: 40px;
        line-height: 40px;
        text-align: center;
    }
    .top-nav>li a{
        color: white;
    }
    .top-nav>li.home{
        background: #4EEE94;
    }
    .top-nav>li:hover{
        background: #4EEE94;
    }
    .top-nas>li{
        font-size:20px;
        float: right;
        list-style: none;
        height: 40px;
        line-height: 40px;
        text-align: center;
    }
    .top-nas>li a{
        color: white;
        margin:10px 10px;
    }
    .top-nas>li a:hover{
        color:#EE7942;
    }
    #show div p{
        position:relative;
        z-index:10;
        width: 258px;
        background-color: white;
    }
</style>
<body>
<header>
    <div class="wrapperb">
        <img class="fl clearfix" src="img/n3.png" style="margin-right:10%;">
        <div  class="fl clearfix" id="box">
            <form action="SceneryNewServlet">
                <input type="text" name="search" id="mainKey" placeholder="请输入景点">
                <input type="submit"  id="search" value="搜索" style="font-size:20px;text-align: center;height:33px;"/><br>
                <div id="show" class="show" style="border: 1px solid grey;width:258px;margin-top:10px"></div>
            </form>
        </div>
        <img  class="fl clearfix" src="img/n4.png" style="margin-left: 10%;">
    </div>
    <div class="wrappera">
        <ul class="top-nav clear-fix">
            <li class="home"><a href="main.jsp" >首页</a></li>
            <li ><a href="hotelShow.jsp" >酒店</a></li>
            <li><a href="sceneryShow.jsp" >景点</a></li>
            <li><a href="travelNote.jsp" >攻略</a></li>
        </ul>
        <c:choose>
            <c:when test="${sessionScope.user.userName==null}">
                <ul class="top-nas clear-fix">
                    <li class="hone"><a href="userRegister.jsp">注册</a></li>
                    <li class="hone">|</li>
                    <li class="hone"><a href="userLogin.jsp">登录</a></li>
                </ul>
            </c:when>
            <c:otherwise>
                <ul class="top-nas clear-fix">
                    <li class="hone"><a href="removeUserServlet?userName=${user.userName}">退出</a></li>
                    <li class="hone"><a href="ownMes.jsp?name=${user}">用户:${user.userName}</a></li>
                </ul>
            </c:otherwise>
        </c:choose>
    </div>
</header>
<script>
    var showNode=document.getElementById("show");
    $("#mainKey").blur(function choice() {
        var thekey=$("#mainKey").val();
        $.ajax({
            url:"GetKeywordNameServlet",
            type:"get",
            data:{"theKey":thekey},
            success:function (data) {
                var result=data.split(",");
                showNode.style.display="block";
                showNode.innerHTML="";
                for (var i=0;i<result.length;i++){
                    var divNode=document.createElement("div");
                    divNode.innerHTML="<p onmouseover='overMethod(this)' onmouseout='outMethod(this)' " +
                        "onclick='resultMethod(this)'>"+result[i]+"</p>"
                    showNode.appendChild(divNode);
                }
            }
        });
    })
    function overMethod(obj){
        obj.style.backgroundColor="darkgrey";
    }
    function outMethod(obj){
        obj.style.backgroundColor="white";
    }
    function resultMethod(obj){
        var v=obj.innerHTML;
        $("#mainKey").val(v);
        showNode.style.display="none";
    }
</script>
</body>
</html>
